<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
    *{margin: 0px;padding: 0px;}
    a{color: black;text-decoration: none;}
    body{font-family:  "宋体";color: black;}
    .now_login{font-size: 14px;float: right;}
    .btd_login{height: 38px;width: 50px;border: 1px solid silver;border-radius: 4px;font-size: 16px;cursor: pointer;margin-left: 10px;}
    #app1{width: 300px;margin:100px auto;}
    label{display: inline-block;width:70px;height: 38px;text-align: center;}
    .tiShi{font-size: 12px;color:red;margin:0 0 10px 70px;}
    .input{width: 200px;height: 38px;border-radius: 4px;}
    textarea{resize: none;border-radius: 4px;}
    .checkbox{font-size: 14px;margin-left: 20px;}
    #btd{width: 270px;height: 38px;border-radius: 5px;background:#5B8020;border: 1px solid  silver;color: white;font-size: 18px;;cursor: pointer;margin-top: 10px;}
    #successful{width: 300px;height: 200px;border: 1px solid silver;position: fixed;left: 50%;bottom: 50%;background:#D8D8D8;display: none;}
    #btn{width: 50px;height: 30px;display: inline-block;float: right;margin-right: 15px;}
</style>
<body>
<div id="app">
    <div id="successful">
        <h3 style="text-align: center;margin-top: 80px;margin-bottom: 40px;">注册成功，快去登录吧!</h3>
        <button id="btn" @click="close" >取消</button>
        <button @click="login" id="btn">登录</button>
    </div>
    <div class ="now_login">我已注册，现在就<button class="btd_login" @click="login">登录</button></div>
    <div id="app1">
        <label>用户名</label><input type="text" placeholder="请设置用户名"  v-model="userInfo.username" class="input" @blur="a"><br>
        <span class="tiShi">{{ tiShi.tishi1 }}</span><br>
        <label>设置密码</label><input type="password" placeholder="请设置登录密码" v-model="userInfo.password"class="input" @blur="b"><br>
        <span class="tiShi">{{ tiShi.tishi2 }}</span><br>
        <button id="btd" @click="flag" :disabled="btn">立即注册</button>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isReturn:false,
            btn:false,
            tiShi:{
                tishi1:"",
                tishi2:""
            },
            userInfo:{
                username:"",
                password:""
            },
            userArr:[]
        },
        methods: {
            //用户名称
            a:function() {
                this.tiShi.tishi1 = '';
                this.isReturn = true;
                var a = /^[a-z]+$/;//小写字母组成
                if (!this.userInfo.username) this.tiShi.tishi1 = '用户名不能为空';
                else if (!a.test(this.userInfo.username)) {
                    this.isReturn = true;
                    this.tiShi.tishi1 = "由小写字母组成"
                }
            },
            //密码
            b:function() {
                this.tiShi.tishi2 = '';
                this.isReturn = true;
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = '密码不能为空';
                } else if (!p.test(this.userInfo.password)) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = "由字母+数字组成，字母开头"
                }
            },
            flag:function() {
                //alert(1)
                this.tiShi.tishi1 = '';
                this.tiShi.tishi2 = '';
                this.isReturn = false;
                //用户名
                var a = /^[a-z]+$/;//小写字母组成
                if (!this.userInfo.username) {
                    this.tiShi.tishi1 = '用户名不能为空';
                    this.isReturn = true;
                } else if (!a.test(this.userInfo.username)) {
                    this.isReturn = true;
                    this.tiShi.tishi1 = "由小写字母组成"
                }
                if (window.localStorage.userArr) {
                    var array = JSON.parse(window.localStorage.userArr);
                } else {
                    array = []
                }
                //遍历数组进行匹配
                for (var i = 0; i < array.length; i++) {
                    //判断是否有相同账号
                    console.log(array)
                    /*alert(array[i].username)*/
                    if (this.userInfo.user == array[i].username) {
                        alert('该账号已存在');
                        /*this.tiShi.tiShi1='该账号已存在';*/
                        return;
                    }
                }

                //字母开头 ，由字母+数字组成
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = '密码不能为空';
                } else if (!p.test(this.userInfo.password)) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = "由字母+数字组成，字母开头"
                }
                //如果有这些提示就return
                if (this.tiShi.tishi || this.tiShi.tishi2) return;
                //if (this.isReturn) return;
                var box = document.getElementById("successful");
                box.style.display = 'block';
                //创建对象
                var obj = {username: this.userInfo.username, password: this.userInfo.password}
                array.push(obj);
                this.userArr=array;
                window.localStorage.userArr = JSON.stringify(array);//把内容转换成字符串形式
                /*userInfo =JSON.stringify(window.localStorage.userArr)*/
                localStorage.setItem('userArr', window.localStorage.userArr);
                // window.location.href='../登录/登录页面.html';
            },
            login:function() {
                console.log("login--->"+localStorage.getItem('userArr'));
                console.log(this.userArr);
            },
            close:function(){
                var box = document.getElementById("successful");
                box.style.display = 'none';
                localStorage.clear();
                array=[];
            }
        }
    });
</script>
</html>